<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
	</head>

	<body>
		
		
		<!-- 底部导航 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="javascript:;" data-id="hotlook">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<!-- <a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a> -->
			<a class="mui-tab-item" href="javascript:;" data-id="ranking">
				<!-- <span class="mui-icon mui-icon-contact"></span> -->
				<span class="mui-icon mui-icon-extra mui-icon-extra-rank"></span>
				<span class="mui-tab-label">榜单</span>
			</a>
			<a class="mui-tab-item" href="javascript:;" data-id="setting">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			
			// 页面窗口APP开发
			mui.plusReady(function () {  // 对plus进行初始化
			   // 监听设备已经启动加载完毕，然后接下来使用plus对象
				// 父窗口
				let parent = plus.webview.currentWebview();  // currentWebview()  当前窗口
			
				// 添加3个主页面的子窗口
				let subPage = [
					{
						url: 'pages/hotlook.html',
						id: 'hotlook'
					},
					{
						url: 'pages/ranking.html',
						id: 'ranking'
					},
					{
						url: 'pages/setting.html',
						id: 'setting'
					},
				]
				
				let child;
				for(let i=0; i<subPage.length; i++){
					// 创建3个页面子窗口
					child = plus.webview.create(subPage[i].url,subPage[i].id,{top: 0, bottom:'50px'});
					
					// 对3个子窗口先进行设置（第2个、3个子窗口进行隐藏）
					if(i>0){
						// 循环第2次、第3次
						child.hide();
					}
					
					// 父窗口添加3个子窗口
					parent.append(child);
				}
				
				// 当前窗口
				let currentTab = subPage[0]; // {url:...,id:....}
				
				// 给底部导航设置点击事件 tap
				mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
					// 点击导航，显示指定的页面子窗口
					let tabId = this.getAttribute('data-id');
					// console.log(tabId);
					
					// 避免重复点击导航
					if(tabId===currentTab['id']){
						return;
					}
					
					// 显示对应的窗口（通过ID名标识的）
					plus.webview.show(tabId,'fade-in',300);
					
					// 隐藏当前窗口
					plus.webview.hide(currentTab.id);
					
					// 重新设置currentTab当前页面
					// let index;
					// subPage.forEach(function(v, k){
					// 	if(v['id']===tabId){
					// 		index = k;
					// 	}
					// })
					// console.log(index);
					// currentTab = subPage[index];
					
					// 数组筛选值
					currentTab = subPage.find((v)=>{
						return v['id'] === tabId;
					});
					console.log(JSON.stringify(currentTab));
					
				});
				
				
				// plus.webview.create('pages/ranking.html','ranking',{top: 0, bottom:'50px'});
				// plus.webview.create('pages/setting.html','setting',{top: 0, bottom:'50px'});
			})
		</script>
	</body>

</html>
